<template>
  <div v-loading.fullscreen.lock="viewLoading">
    <CrudView
      :form-data="formData"
      :form-items="formItems"
      :btn-items="btnItems"
      :page-colums="pageColums"
      :page-data="{pageInfo, list}"
      :selection-change-handler="selectionChangeHandler"
    />
    <!-- 课程基本信息信息编辑/新增模态框  -->
    <el-dialog
      :title="modalTitle"
      :center="true"
      :visible.sync="showModal"
      :before-close="closeModal"
    >
      <el-form :model="modalData" label-width="90px" :disabled="modalModel === 'Look'" label-position="top">
        <el-tabs v-model="activename">
          <el-tab-pane label="基本信息" name="first">
            <div style="max-height: 400px;overflow: auto">
              <el-form-item label="课程名称">
                <el-input v-model="modalData.courseName" type="text" />
              </el-form-item>
              <el-form-item label="开课学院">
                <el-select v-model="modalData.collegeId">
                  <el-option v-for="item in dropDownData.college" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="课程性质">
                <el-select v-model="modalData.courseProperty">
                  <el-option label="必修" :value="0" />
                  <el-option label="选修" :value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="学分">
                <el-input v-model="modalData.credit" type="number" />
              </el-form-item>
              <el-form-item label="考核方式">
                <el-select v-model="modalData.assessmentWay">
                  <el-option label="考试" :value="0" />
                  <el-option label="论文" :value="1" />
                  <el-option label="实验" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="所需教室类型">
                <el-select v-model="modalData.requiredRoomTypeId">
                  <el-option v-for="item in dropDownData.classroomType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="modalModel !== 'Look'">
                <el-button @click="modalCancelHandler">取消</el-button>
                <el-button type="primary" @click="modalSubmitHandler">提交</el-button>
              </el-form-item>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import CrudView from '@/components/CrudView'
import { getCollegeDropDown, getClassroomTypeDropDown } from '@/api/ms/dropdown'
import { getPage, getById, update, create, deleteByIds } from '@/api/ms/course/course/course'
// vue对象钩子
let vueHook = null

function getDefaultModalData() {
  return { // 默认的课程基本信息信息编辑/新增modal框数据
    id: null,
    courseName: '',
    credit: null,
    courseProperty: null,
    assessmentWay: null,
    requiredRoomTypeId: null,
    collegeId: null
  }
}

export default {
  name: 'CourseBasic',
  components: { CrudView },
  data() {
    return {
      viewLoading: false,
      formData: {
        courseName: '',
        courseProperty: null,
        assessmentWay: null,
        requiredRoomTypeId: null,
        collegeId: null
      },
      dropDownData: {
        // 教室类型下拉数据
        classroomType: [],
        // 学院下拉数据
        college: []
      },
      formItems: [
        { order: 1, label: '课程名称', type: 'Input', paramName: 'courseName' },
        { order: 2, label: '课程性质', type: 'Select', paramName: 'courseProperty', options: [
          { label: '必修', value: 0 },
          { label: '选修', value: 1 }
        ] },
        { order: 3, label: '考核方式', type: 'Select', paramName: 'assessmentWay', options: [
          { label: '考试', value: 0 },
          { label: '论文', value: 1 },
          { label: '实验', value: 2 }
        ] },
        { order: 4, label: '所需教室类型', type: 'Select', paramName: 'requiredRoomTypeId', options: [] },
        { order: 5, label: '开设学院', type: 'Select', paramName: 'collegeId', options: [] },
        { order: 6, type: 'Button', btnName: '查询', clickHandler: () => {
          vueHook.ignoreRefresh = true
          vueHook.pageInfo.pageNum = 1
          vueHook.refreshPageList()
        }
        }
      ],
      btnItems: [
        { order: 1, name: '查看', type: 'primary', clickHandler: () => vueHook.openModal('Look') },
        { order: 2, name: '编辑', type: 'warning', clickHandler: () => vueHook.openModal('Edit') },
        { order: 3, name: '添加', type: 'success', clickHandler: () => vueHook.openModal('Create') },
        { order: 4, name: '删除', type: 'danger', clickHandler: () => vueHook.batchDeleteCourse() }
      ],
      pageColums: [
        { label: '课程名称', propName: 'courseName' },
        { label: '学分', propName: 'credit' },
        { label: '课程性质', propName: 'coursePropertyShow' },
        { label: '考核方式', propName: 'assessmentWayShow' },
        { label: '所需教室类型', propName: 'requiredRoomTypeName' },
        { label: '开设学院', propName: 'collegeName' }
      ],
      pageInfo: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页行数
        total: 1000 // 列表总行数
      },
      selectionChangeHandler: (srows) => { // 记录选择改变handler
        vueHook.ids = srows.map(i => i.id)
      },
      list: [], // 数据列表
      ignoreRefresh: false,
      ids: [], // 选中的id列表
      showModal: false, // modal框显示标识
      modalTitle: '', // modal标题
      modalModel: 'Look', // modal状态 ，分别为 Look、Edit、Create
      activename: 'first',
      modalData: {} // 课程基本信息信息编辑/新增modal框数据
    }
  },
  computed: {
    // 分页参数组装
    pageParam() {
      const formData = this.formData
      const pageInfo = this.pageInfo
      return { ...formData, pageInfo }
    }
  },
  watch: {
    pageInfo: {
      handler(val) {
        if (this.ignoreRefresh) {
          // 需要忽略本次change
          this.ignoreRefresh = false
          return
        }
        // 向后台请求新的表格数据
        this.refreshPageList()
      },
      deep: true
    }
  },
  mounted() {
    // 暴露vue对象
    vueHook = this
    // 请求下拉框数据
    this.refreshDropDown()
    // 向后台请求新的表格数据
    this.refreshPageList()
  },
  methods: {
    // 刷新表单下拉框数据
    refreshDropDown() {
      // 获取学院表单数据
      getCollegeDropDown().then(({ data }) => {
        this.dropDownData.college = data
        this.formItems[4].options = data
      })
      // 获取教室类型下拉数据
      getClassroomTypeDropDown().then(({ data }) => {
        this.dropDownData.classroomType = data
        this.formItems[3].options = data
      })
    },
    // 刷新课程基本信息列表数据
    refreshPageList() {
      getPage(this.pageParam).then(({ list, pageInfo }) => {
        this.ignoreRefresh = true
        this.list = list
        this.pageInfo = pageInfo
      })
    },
    // 打开课程信息编辑/新增modal
    openModal(model) {
      // 如果是Create操作，直接打开modal
      if (model === 'Create') {
        // 打开modal
        this.modalTitle = '课程信息创建'
        this.modalModel = model
        this.showModal = true
        return
      }

      // 获取选中的课程id列表
      const ids = this.ids
      if (!ids || ids.length === 0) {
        this.$message.error('请选择一条记录')
        return
      }
      if (ids.length > 1) {
        this.$message.error('只能选择一条记录')
        return
      }
      // 获取课程详细信息 ，成功后打开modal
      getById(ids[0]).then(({ data }) => {
        this.modalData = data
        // 打开modal
        this.modalModel = model
        this.modalTitle = model === 'Edit' ? '课程信息编辑' : '课程信息详情'
        this.showModal = true
      })
    },
    // 关闭课程信息编辑/新增modal
    closeModal() {
      this.showModal = false
      // 重置modal数据
      this.activename = 'first'
      this.modalData = getDefaultModalData()
    },
    // 点击modal取消按钮
    modalCancelHandler() {
      this.closeModal()
    },
    // 点击modal提交按钮
    modalSubmitHandler() {
      if (this.modalModel === 'Edit') {
        this.updateCourseInfo()
      } else if (this.modalModel === 'Create') { this.createCourseInfo() }
    },
    // 创建课程信息
    createCourseInfo() {
      create(this.modalData).then((res) => {
        this.$message.success(res.message)
        // 刷新数据
        this.refreshPageList()
        // 关闭modal
        this.closeModal()
      }).catch(err => {
        console.log(err)
        // 关闭modal
        this.closeModal()
      })
    },
    // 修改课程信息
    updateCourseInfo() {
      update(this.modalData).then((res) => {
        this.$message.success(res.message)
        // 刷新数据
        this.refreshPageList()
        // 关闭modal
        this.closeModal()
      }).catch(err => {
        console.log(err)
        // 关闭modal
        this.closeModal()
      })
    },
    // 批量删除课程信息(逻辑删除)
    batchDeleteCourse() {
      if (this.ids === null || this.ids.length < 1) {
        this.$message.error('请至少选择一条记录')
        return
      }
      this.$confirm('请确认是否删除？').then(() => {
        deleteByIds(this.ids).then(res => {
          this.$message.success(res.message)
          // 刷新数据
          this.refreshPageList()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message.info('删除已取消')
      })
    }

  }
}
</script>

<style>

</style>

